@charset 'UTF-8';
@function vw($px){
  @return $px / 10.8 + vw
}
.ticketOrder-box{
  font-size: vw(36);
  .ticket-info{
    font-size: vw(42);
    p{
      display: flex;
      justify-content: space-between;
      color: #666;
      line-height: vw(138);
      border-bottom: 1px solid #e6e6e6;
      &:last-child{
        border-bottom: 0;
      }
      i{
        color: #f45000;
        font-weight: 700;
        b{
          font-size: vw(66);
        }
      }
    }
  }
  .pa-l-r{
    h5{
      padding: vw(24) vw(12);
      font-size: vw(42);
      font-weight: bold;
      color: #333;
    }
  }
  .tourist-info {
    width:100%;
    padding: vw(34) vw(25);
    border-radius:vw(12);
    box-shadow: 0 0 10px rgb(198, 189, 189);
    .tourist-details{
      p{
        margin-bottom: vw(28) ;
        font-size: vw(36);
        color: #666;
      }
    }
    .title-box{
      display: flex;
      justify-content: space-between;
      .btn{
        background-color: rgb(245, 245, 245);
        width: vw(140);
        height: vw(64);
        border-radius: vw(64);
        color: #333;
        font-size: vw(36);
      }
    }
  }
  .add-box{
    .add-info{
      width: 100%;
      padding: vw(30) vw(25) vw(40);
      border-radius: 12px;
      background-color: rgb(245, 245, 245);
      &.add-child{
        display: none;
        margin-top: vw(20);
      }
      >p{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: vw(40);
        .btn{
          background-color: white;
          width: vw(140);
          height: vw(64);
          border-radius: vw(64);
          color: #333;
          font-size: vw(36);
          &.confirm-btn{
            margin-right: vw(30);
            background-color: #f4942e;
            color: #fff;
          }
        }
      }
      .select-box{
        display: flex;
        justify-content: center;
        input {
          display: none
        }
        label {
          display: block;
          width: vw(280);
          height: vw(80);
          margin:0 vw(40) vw(30);
          border-radius: 12px;
          text-align: center;
          line-height: vw(80);
          color: #999;
          font-size: vw(36);
          background-color: rgb(255, 255, 255);

        }
        input:checked + label{
          background-color: #4f92fd;
          color: white;
        }
      }
      .spot-box{
        font-size: vw(36);
        color: #333;
        text-align: center;
        p{
          height: vw(100);
          width: vw(800);
          margin: 0 auto;
          line-height: vw(100);
          border-radius: 12px;
          background-color: rgb(230, 230, 230);
        }
        div{
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: vw(36);
          &:last-child{
            margin-bottom: 0;
          }
          span{
            min-width: vw(160);
            text-align: right;
          }
          input{
            width: vw(660);
            height: vw(80);
            line-height: vw(80);
            border-radius: 12px;
            text-align: center;
            background-color: rgb(230, 230, 230);
          }

        }
      }
    }
    .add-btn{
      display: flex;
      padding: vw(50) 0;
      justify-content: space-between;
      button {
        width: vw(298);
        height: vw(78);
        margin:0 vw(98);
        border-radius: vw(6);
        border: 1px solid  rgb(230, 230, 230);
        background-color: transparent;
        font-size: vw(36);
        color: #333;
        i{
          display: inline-block;
          width: vw(40);
          height: vw(40);
          margin-right: vw(20);
          background-color: #e6e6e6;
          color: white;
          border-radius: vw(40);
        }
      }
    }

  }
  .child-prompt{
    h3{
      margin: vw(60) auto vw(30);
      text-align: center;
      color: 666;
      font-size: vw(42);
    }
    p{
      font-size: vw(36);
      color: #666;
      line-height: vw(58);
    }
    div{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    select{
      width: vw(178);
      height: vw(78);
      margin: vw(18) 0;
       border-width: 1px;
       border-color: rgb(230, 230, 230);
       border-style: solid;
       border-radius: 6px;
       background-color: rgb(255, 255, 255);
      color: #999;
      font-size: vw(36);
     }
    span{
      font-size: vw(36);
      color: #333;
      margin: 0 vw(40) 0 vw(20);
    }
  }
  .contact-box{
    div{
      padding: vw(30) vw(15);
      border-top: 1px solid #e6e6e6;
      input{
        width: 100%;
        height: vw(98);
        padding:0 vw(16);
        border-width: 1px;
        border-color: rgb(230, 230, 230);
        border-style: solid;
        border-radius: 12px;
        background-color: rgb(245, 245, 245);
      }
    }
  }
  .num-box{
    h5{
      border-bottom: 1px solid #f0f0f0;
    }
    div{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: vw(40) vw(18);
      font-size: vw(42);
      color: #333;

      p{
        color: #f45000;
        font-weight: 700;
        b{
          font-size: vw(66);
        }
        i{
          color: #333;
          font-size: vw(36);
        }
      }
    }
  }

}
.ticketOrder-box+.gray-box{
  height: vw(320);
}
.footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: vw(140);
  button {
    width: vw(490);
    height: vw(120);
    border-radius: vw(60);
    font-size: vw(54);
  }

  p{
    font-size: vw(42);
    color: #333;
    span{
      color: #f45000;
      font-weight: 700;
      i{
        font-size: vw(66);
      }
    }
  }
}
